layui.use([ 'element','layer' ], function() {
			var element = layui.element;
			var layer = layui.layer;
            $(window).resize(function() {
                var width = $(this).width();
                var height = $(this).height();
                screenChange(width,height);
            });

            var isopen=false;
            
            function screenChange(width,height) {
                if (width>1400){
                    $("#md-title").show();
                    $("#layui-body").css("padding",10);
                    $("#openDocument").hide();
                    $("#content_right").removeClass("content-right-sm");
                    $("#content_right").addClass("content-right-md");
                    $("#content_left").width(width-1306);
                    $("#content_left").height(height-200);
                    $("#content_left").show();
                }else{
                    $("#layui-body").css("padding",0);
                    $(".layui-table").css("margin-top",0);
                    $("#openDocument").show();
                    $("#md-title").hide();
                    $("#content_left").hide();
                    $("#content_right").addClass("content-right-sm");
                    $("#content_right").removeClass("content-right-md");
                }
            }
            

            $(function () {
                screenChange($(window).width(),$(window).height());
                var currDocumentUrl="1_1Android Studio install.html";
                getContent(currDocumentUrl);
                $("#experimentName").html($(".layui-nav-tree li dl dd:first").text());

				element.on('nav(main_nav)', function(elem){
					$("#experimentName").text($(elem).text());
                    currDocumentUrl=$(elem).children().attr("data-url");
					getContent(currDocumentUrl);
				});
				
				$(".layui-nav-tree li").each(function (parentIndex) {
                    $(this).click(function () {
                        var currIndex=parentIndex;
                        $(".layui-nav-tree li").each(function (index) {
                           if (currIndex==index){
                               $(this).addClass("layui-nav-itemed");
						   }else{
                               $(this).removeClass("layui-nav-itemed");
						   }
						});
                    });
                });

				$("#openDesktop").click(function () {
					if (isopen) {
						layer.alert("请不要重复开启桌面");
					}else{
						$("#content_right").html("");
						startGuacamole();
						isopen=true;
					}
                });
				
				$("#openDocument").click(function () {
					window.open("Experiments/"+currDocumentUrl);
                });

				$("#closeDesktop").click(function () {
				    layer.confirm("确定要关闭桌面吗？",["确定"],function () {
				    	$.ajax({
				    		url:"dockerCloseCurrent",
				    		type:"GET",
				    		success:function(res){
				    			layer.closeAll();
				    			if (res.success) {
				    				isopen=false;
				    				$("#content_right").html("");
				    				layer.alert("关闭成功",function(){
				    					layer.closeAll();
				    				});
								}else{
									layer.alert("请求异常，请重试");
								}
				    		}
				    	});
                    });
                });
				
		        $("#loginOut").click(function(){
		        	layer.confirm("确定退出吗？",["确定"],function(){
		        		window.location="loginOut";
		        	});
		        });

			});
			
			function getContent(url) {
				$.ajax({
					url:"Experiments/"+url,
					type:"GET",
					success:function(content){
						$("#content_left").html(content);
						$("img").dblclick(function () {
							var width=$(this).attr("width");
							var height=$(this).attr("height");
							var imageSrc=$(this).attr("src");
							var $img=$("<img width='"+width*2+"' height='"+height*2+"' src='"+imageSrc+"'>");
                            var show_image_html=$("#show_image").html($img);
                            //自定页
                            layer.open({
                                type: 1,
								title: "图片查看器",
                                skin: 'layui-layer-demo', //样式类名
                                closeBtn: 1, //不显示关闭按钮
                                shadeClose:true,
                                shade: 0.1,
                                anim: 0,
                                area: ['auto', 'auto'],
                                content: show_image_html
                            });
                        });
					}
				});
			}
			
			function startGuacamole() {
				var display = document.getElementById("content_right");
			    var guac = new Guacamole.Client(
			        new Guacamole.HTTPTunnel("tunnel")
			    );
			    // Add client to display div
			    display.appendChild(guac.getDisplay().getElement());
			    // Error handler
			    guac.onerror = function(error) {
			        console.info(error);
			        isopen=false;
			        $("#content_right").html("");
			    };
			    // Connect
			    guac.connect();
			    console.log('连接到远程桌面')
			    // Disconnect on close
			    // Mouse
			    var mouse = new Guacamole.Mouse(guac.getDisplay().getElement());
			    mouse.onmousedown =
			        mouse.onmouseup   =
			            mouse.onmousemove = function(mouseState) {
			                guac.sendMouseState(mouseState);
			            };

			    // Keyboard
			    var keyboard = new Guacamole.Keyboard(document);
			    keyboard.onkeydown = function (keysym) {
			        guac.sendKeyEvent(1, keysym);
			    };
			    keyboard.onkeyup = function (keysym) {
			        guac.sendKeyEvent(0, keysym);
			    };
			    window.onbeforeunload=function(){
			    	guac.disconnect();
			    }
			}
		});
    